
/* ========== Smartphone ==============*/

@media only screen 
and (min-width : 320px) 
and (max-width : 767px) {
/* Styles */
	.left { float:none;}
	.right{ float:none;}
	#header{ width:100%; margin:0 auto; padding:0; overflow:hidden; margin-bottom:10px; }
	#header .col1{ }
	#header .col1 img{ width:100%;}
	#header .col2{ overflow:hidden; margin-top:20px; background:#CF9; text-align:center;}
	#header .col2 span.cn1{ overflow:hidden; color:#D86C00; font-style:italic; font-weight:bold; text-align:left; width:100%; padding-right:20px; display:block; font-size:16px; padding:5px;}
	#header .col2 span.cn2{ overflow:hidden; color:#52510B; font-weight:bold; display:block;}
	#header .col2 span.cn2 img{  display:none;}
	#header .col2 .socmed {overflow:hidden; color:#D86C00; font-style:italic; font-weight:bold; text-align:center; margin-top:8px; }
	#header .col2 .socmed a{ padding-top:7px; vertical-align:middle; display:inline-block; zoom:1;  vertical-align:middle;}
	
	#header-banner{ }
	#header-menu ul{ display:block;}

	#header-menu ul li{ overflow:hidden; float:none; display:block; }
	#header-menu ul li a{ color:#F2EDB2; font-weight:bold; font-size:20px; display:block; padding:30px 33px; position:relative; }
	#header-menu ul li.active a{ background-color:#CEF18D; color:#59703A;}
	#header-menu ul li a:hover{ background-color:#78DB5B; color:#59703A;}
	
	#header-menu ul li.sub > ul.submenu{ display:none; position:relative;  margin-left:0px; margin-top:25px;}
	#header-menu ul li.sub:hover > ul.submenu li { float:none; display:block;  }
	#header-menu ul li.sub:hover > ul.submenu li a{ display:block; padding:30px 0px; font-size:16px; text-align:center; }
	
	.box-page { text-align:center;}
	.box-page img{ margin-right:0px; width:30%; float:none;}
	.box-page .desc{ background-color:#B7CD2B; overflow:hidden; padding:5px; overflow:hidden; text-align:justify}
	.box-page .desc h2{ font-weight:bold; font-style:italic; margin-bottom:20px; font-size:22px;}
	.box-page .desc p a{ padding-top:5px; overflow:hidden; display:inline-block; font-weight:bold; font-style:italic; }
	.box-page .desc p a:hover{ text-decoration:underline; color:#630;}
	
	
	#footer h1{ font-size:26px;}
	#footer #wrap-footer{ padding:20px 0px 0px 0px; width:100%;}
	#footer .col1{ width:100%;  text-align:center; overflow:hidden;}
	#footer .col1 img{ float:none; margin-right:0px;}
	#footer .col1 p{ text-align:left; font-size:16px;}
	
	#footer .col2 { overflow:hidden; text-align:left; width:100%; text-align:center;}
	#footer .col2 .box{  font-size:16px; }
	#footer .col2 .box h2 { font-size:22px;}
	
	#menu-footer .col1 {width:95%; padding:0px 10px; overflow:hidden; }
	#menu-footer .col1 a{ font-size:14px;}
	
	#menu-footer .col2{ width:100%; text-align:center;}

}


/* =========== Tablet ================*/

@media only screen 
and (min-width : 768px) 
and (max-width : 1020px) {
/* Styles */


}


/* =========== Screen ================*/

@media only screen 
and (min-width : 1021px) 
and (max-width : 1200px) {
/* Styles */
	/*======================== HEADER ============================*/
	#header{ width:100%; margin:0 auto; padding:0; overflow:hidden; margin-bottom:10px; }
	#header .col1{ width:45%; padding-left:3px; }
	#header .col1 img{ width:100%;}
	#header .col2{ padding-right:3px;}
	
	#header-menu ul li a{ font-size:18px; display:block; padding:30px 20px; }
	#header-menu ul li.sub{ font-size:18px; display:block; padding:30px 20px; }
	#header-menu ul li.sub > ul.submenu{ display:none; position:absolute; z-index:1000; margin-left:-20px; margin-top:30px;}
	
	/*======================== CONTENT ============================*/
	#wrap{ padding:0; margin:0 auto; overflow:hidden; padding:50px 5px 5px 5px; font-size:16px; width:95%;}
	#wrap-content{ float:left; width:68%;}
	
	.box-article .list-article ul li { height:290px; background:url(../images/spacer-dotted.png) repeat-x bottom; margin-bottom:30px;}
	.box-article .list-article ul li a img{ max-height:230px;}

	
	.detail { overflow:hidden; text-align:justify; padding:0px 15px;}
	
	.article { overflow:hidden; padding:0px 15px; font-size:14px;}	
	.article ul li h2{ margin-bottom:10px; font-size:24px;}
	.article ul li a.rd{  font-size:18px; }
	
	.contact iframe{ width:370px;}
	.contact .col2 ul li .input1 { width:510px; }
	.contact .col2 ul li .area1{width:505px; }
	.contact .col2 ul li .area2{width:505px; }
	#paging{ font-size:16px; }

	/* ===================== FOOTER ======================*/
	#footer { width:100%;  font-size:15px; font-weight:bold; }
	
	#footer .col1{ width:54%; overflow:hidden; padding-left:5px;}

	#footer .col1 p{ overflow:hidden; }
	#menu-footer .col2{ overflow:hidden; padding:5px; font-size:14px; width:30%; text-align:right; padding-right:10px;  }
	#menu-footer .col1 a { font-size:14px;}

}